Using the Button nodes

Use the Button nodes to create interactions through clicking or tapping. Use Button 3D to create a 3D button and Button 2D to create a 2D button.

When a user clicks the visual representation of a button, the action generates a message that travels to the button object where you can define the behavior for that message. When you create a button it does not have a visual shape. To make buttons visible, you have to add an object to a button.

When you create a Button node Kanzi by default adds a Button: Click message to the node. However, you can add other messages as well. For example, you can add messages that are triggered when a user presses down a mouse button or cancels a click. See Using triggers.

To learn how to create a button complete the button tutorial. See Tutorial: Creating a button.

Creating a button

To create a button:

  1. In the Project press Alt and right-click the object where you want to create a button and select either Button 3D, or Button 2D.
    Note that you can create a 3D node only inside 3D nodes, and 2D node only inside 2D nodes.
  2. In the Project add a visual shape to the button.
    For example, if you created a 3D button, add a Box, if you created a 2D button add an Image.
  3. In the Project select the button, in the Triggers in the Button: Click message click the Add drop-down menu, and select an action.
    For example, select the Write Log action and set its Log Message property to <Name>.
    In the Preview when you click the visual representation of the button the Write Log action writes the name of that object to the Log window.

Setting the background of a Button 2D

Use brushes to set the background of 2D nodes. In Kanzi all 2D nodes by default have transparent background.

To set the background:

  1. Create a Color Brush, a Texture Brush, or a Material Brush. See Using brushes.
  2. In the Project select the 2D node the background of which you want to paint.
    Note that you can set only the background of 2D nodes.
  3. In the Properties click , add the Background Brush property, and select the brush you created in the first step.

Using Button 3D in the API

For details, see the API reference.

Using Button 2D in the API

For details, see the API reference.

See also

Tutorial: Creating a button

Using the Toggle Button nodes

Using the Toggle Button Group nodes

Buttons

Open topic with navigation